<template>
	<view class="flex1 flex_c" style="position: relative; height: 100%;width: 100%;">
		<view class="flex_r fj_b fa_c custom-page-title">
			<view class=""></view>
			<view class="text_34 bold_ c-primary">
				鱼塘
			</view>
			<view class=""></view>
		</view>
		<scroll-view class="flex1 custom-page" scroll-y refresher-enabled
			:refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh">
			<view style="height: 100rpx;"></view>
			<view class="content">
				<view class="warp">
					<c-gap height="20rpx" />
					<view class="avater-line">
						<view v-if="index<16" v-for="(item,index) in dataList" :key="item.id" class="avater"
							:class="isFilter ? 'list-anvther-filter' : ''">
							<image class="avater-img" @tap.stop="nextHandle1(item)"
								:class="isFilter ? 'list-anvther-filter' : ''" :src="item.pic" mode="aspectFill"></image>
						</view>
					</view>
					<c-gap height="20rpx" />
					<view class="flex_c fj_a desc-line">
						<view class="text_32 bold_ c-fff">
							鱼塘
						</view>
						<view class="text_26 color__ desc-text c-fff">全国海量用户等你品鉴</view>
					</view>
					<c-gap height="20rpx" />
					<view class="flex_r fj_b btn-line">
						<view></view>
						<view class="btn" @tap="refresh()">换一批</view>
					</view>
					<c-gap height="50rpx" />
					<!-- <view class="btn-line">
						<view v-if="!userInfo.is_vip" @tap="$c.jump('/pages/user/vip')" class="home-jiesuo">解锁更多</view>
					</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refresherTriggered:false,
				$c: this.$c,
				dataList: [],
				isNext: false,
				isFilter: true,
				userInfo: {
					vipMap:{
						isVip: 0
					}
				},

				param: {
					point: '',
					pageType: 130,
					is_online: 0,
					sex: 2,
					page: 1,
					city_name: '',
					province_name: '',
					pre_rst_ids: ''
				}
			};
		},
		created() {
			this.getUserInfo()
			if (this.userInfo.vipMap.is_vip) {
				this.isFilter = false;
			}
			// this.isFilter = false;
			this.getData();
		},
		methods: {
			async getUserInfo() {
				let res = await this.$c.post('/app/usermessage/getMessage')
				if (res.code != 0) {
					uni.navigateTo({
						url: '/im/login/login'
					});
				}
				this.userInfo = res.data
			},
			refresherrefresh(){
				// uni.showToast({
				// 	title: '下拉',
				// 	duration: 1000
				// });
				// this.refresherTriggered = true
				// setTimeout(() => {
				// 	this.refresherTriggered = false
				// },1000)
			},
			refresh() {
				this.getData();
				// if (this.userInfo.vipMap.is_vip) {
				// 	this.getData();
				// } else {
				// 	this.$refs.unvip.open();
				// }
			},
			nextHandle1(item) {
				if (this.userInfo.vipMap.isVip) {
					uni.navigateTo({
						url: `/pages/m-pages/m-user-info/index?userid=`+item.id
					})
					// this.$c.jump('/pages/info/info?id=' + item.id);
				} else {
					// this.$refs.unvip.open();
					this.$c.jump('/pages/m-pages/m-vip/index');
				}
			},
			unvipHandle() {
				this.$refs.unvip.close();
				this.$c.jump('/pages/user/vip');
			},
			async getData() {
				console.log(this.param);
				let res = await this.$c.post('/app/user/getRandomUserList', this.param);
				// if (res.code !== 0) {
				// 	this.$c.show(res.message);
				// 	return;
				// }
				this.dataList = res.data;
				console.log(this.dataList)
			}
		}
	};
</script>

<style lang="scss">
	.unvip-wrap {
		width: 600rpx;
		background-color: #fff;
		// color: #fff;
		padding: 50rpx 0rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		text-align: center;

		.unvip-content {
			padding: 0rpx 80rpx;
		}

		.unvip-btn {
			width: 500rpx;
			height: 80rpx;
			text-align: center;
			margin: 0 auto;
			line-height: 80rpx;

			color: #a14617;

			// background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 80rpx;
		}
	}

	.content {
		width: 750rpx;

		.warp {
			width: 702rpx;
			margin: 0 auto;

			.nav-bar {
				display: flex;
				font-weight: 550;
				font-size: 34rpx;
				color: #fff;

				.title {
					width: 680rpx;
					text-align: center;
				}
			}

			.avater-line {
				display: flex;
				flex-wrap: wrap;

				justify-content: space-between;

				.list-anvther-filter {
					filter: blur(4px);
				}

				.avater {
					width: 150rpx;
					height: 170rpx;
					// margin-top: 10rpx;

					.avater-img {
						margin: 0 auto;
						width: 124rpx;
						height: 124rpx;
						display: block;
						border-radius: 50%;
					}
				}
			}

			.desc-line {
				width: calc(100% - 70rpx);
				height: 180rpx;
				margin: 20rpx auto 40rpx auto;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 0.1);
				padding: 30rpx;
				box-sizing: border-box;
			}

			.btn-line {
				box-sizing: border-box;
				padding: 0 40rpx;
				.home-jiesuo {
					width: 694rpx;
					height: 100rpx;
					background-size: 100% 100%;
					text-align: center;
					line-height: 100rpx;
					color: #fff;
					font-size: 32rpx;
					z-index: 10;
					color: #a14617;
					border-radius: 100rpx;
					background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
					/* background-color: #ff0571; */
				}

				.btn {
					width: 180rpx;
					height: 78rpx;
					line-height: 78rpx;
					text-align: center;
					border-radius: 40rpx;
					color: #fff3e2;
					background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
					/* background-color: #ff0571; */
				}
			}
		}
	}


	.custom-page-title {
		box-sizing: border-box;
		position: absolute;
		padding: 0 20rpx;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.05);
	}

	.custom-page {
		width: 100%;
		height: 0;

		.custom-page-title {}
	}
</style>